<template>
	<div class="catalog_table">
		<el-table ref="table" :data="data" style="width: 100%" height="100%" @select="handleSelectChecked">
			<el-table-column type="selection" label="选择" width="48"></el-table-column>
			<el-table-column prop="initial" label="首字母" width="100">
				<template slot-scope="{ row }">
					<el-tag>{{ row.initial }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="编目名称" min-width="240"></el-table-column>
			<el-table-column prop="createName" label="创建者" width="120"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
			<el-table-column label="操作" width="186">
				<template slot-scope="{ row }">
					<el-button size="medium" type="text" @click="handleDataOperate('move', row)">移动到</el-button>
					<el-button size="medium" type="text" @click="handleDataOperate('look', row)">详情</el-button>
					<el-button size="medium" type="text" @click="handleDataOperate('edit', row)">编辑</el-button>
					<el-button size="medium" type="text" @click="handleDeleteData(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import catalogMixins from '../mixins/catalog';
export default {
	mixins: [catalogMixins],
	data() {
		return {};
	},
	watch: {
		checkedData(arr) {
			console.log(arr);
			this.$nextTick(() => {
				this.$refs['table'].clearSelection();
				arr.forEach((item) => {
					let info = this.data.find((n) => n.id === item);
					this.$refs['table'].toggleRowSelection(info, true);
				});
			});
		}
	},
	methods: {
		//选择多选框
		handleSelectChecked(data) {
			this.checkedData = data.map((item) => item.id);
		},

		//编目操作
		handleCatalogOper(type, data) {
			this.$emit('handle', type, data);
		}
	}
};
</script>

<style lang="scss" scoped>
.catalog_table::v-deep {
	height: 100%;
	box-sizing: border-box;

	.el-table {
		border: solid 1px #ebeef5;
		border-bottom: none;
	}

	th.el-table__cell {
		&:first-child .cell::before {
			content: '选择';
		}

		.el-checkbox {
			display: none;
		}
	}
}
</style>
